<template>
  <div class="dev">
    <!-- 搜索框 -->
    <div class="search">
      <el-input placeholder="请输入租户名称" clearable prefix-icon="el-icon-search" v-model="tenantName">
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="search">查找</el-button>
      <el-button type="success" icon="el-icon-plus" @click="add">添加</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="AdaPay" name="second">
        <!-- 表格数据 -->
        <div class="table">
          <el-table :data="tableData" height="calc(100%-10rem)" ref="isExpand1" v-loading="loading" border
            highlight-current-row stripe style="width: 100%">
            >
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column width="200" align="center" prop="tenantId" label="租户ID">
            </el-table-column>
            <el-table-column width="200" fixed="left" align="center" prop="tenantName" label="租户名称">
            </el-table-column>
            <el-table-column width="200" align="center" prop="url" label="域名">
            </el-table-column>
            <!-- 微信开始 -->
            <el-table-column width="200" align="center" prop="wxXcxAppId" label="微信appId">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxXcxSecret" label="微信secret">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpAppId" label="公众号appid">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpToken" label="公众号token">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpSecret" label="公众号secret">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpAesKey" label="公众号AES">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpLowBatMsgT" label="低电量提醒模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpChargeMsgT" label="充值提醒模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpLongTimeMsgT" label="长时间未充值提醒模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpMinusMsgT" label="负电量提醒模板">
            </el-table-column>
            <!-- 微信结束 -->
            <!-- 支付宝开始 -->
            <el-table-column width="200" align="center" prop="aliAppId" label="支付宝appId">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliPrivateKey" label="支付宝用户私钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.aliPrivateKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.aliPrivateKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliPublicAppKey" label="支付宝应用公钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.aliPublicAppKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.aliPublicAppKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliPublicKey" label="支付宝公钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.aliPublicKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.aliPublicKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliAesKey" label="支付宝AES">
            </el-table-column>
            <!-- 支付宝结束 -->
            <!-- 汇付开始 -->
            <el-table-column width="200" align="center" prop="huifuType" label="汇付主体">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.huifuType == 1">斗拱</el-tag>
                <el-tag v-else-if="scope.row.huifuType == 2">AdaPay</el-tag>
                <el-tag type="danger" v-else>暂无</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuAdapayAppId" label="AdaPayID">
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuAdapayMockApiKey" label="mock模式Key">
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuAdapayProdApiKey" label="prod模式Key">
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuAdapayRsaPrivateKey" label="RSA私钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.huifuAdapayRsaPrivateKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.huifuAdapayRsaPrivateKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuAdapayRsaPublicKey" label="RSA公钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.huifuAdapayRsaPublicKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.huifuAdapayRsaPublicKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuAdapayRsaTenantPublicKey" label="商家公钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover"
                  :content="scope.row.huifuAdapayRsaTenantPublicKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.huifuAdapayRsaTenantPublicKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <!-- 汇付结束 -->
            <!-- 阿里短信模板开始 -->
            <el-table-column width="200" align="center" prop="aliMsgAccessKeyId" label="阿里云accessKeyId">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgAccessKeySecret" label="阿里云accessKeySecret">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliSignName" label="签名">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgBindCardT" label="绑定银行卡短信模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgChangeCardT" label="更改银行卡短信模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgDeleteCardT" label="删除银行卡短信模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgRegisterT" label="阿里云注册模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgForgetPasswordT" label="阿里云忘记密码模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgChangeOldUserT" label="阿里云旧手机号模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgChangeNewUserT" label="阿里云新手机号模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgVirtualT" label="租币短信模板">
            </el-table-column>
            <!-- 阿里云模板结束 -->
            <el-table-column width="200" align="center" prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column width="200" align="center" prop="modifyTime" label="修改时间">
            </el-table-column>
            <el-table-column width="200" fixed="right" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="recharge(scope.row)">DM支付</el-button>
                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="superAdmin(scope.row)">超管</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination v-show="tableData.length !== 0" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 15, 20, 25, 30]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="斗拱" name="first">
        <!-- 表格数据 -->
        <div class="table">
          <el-table :data="tableData" height="calc(100%-10rem)" ref="isExpand2" v-loading="loading" border
            highlight-current-row stripe style="width: 100%">
            >
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column width="200" align="center" prop="tenantId" label="租户ID">
            </el-table-column>
            <el-table-column width="200" fixed="left" align="center" prop="tenantName" label="租户名称">
            </el-table-column>
            <el-table-column width="200" align="center" prop="url" label="域名">
            </el-table-column>
            <!-- 微信开始 -->
            <el-table-column width="200" align="center" prop="wxXcxAppId" label="微信appId">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxXcxSecret" label="微信secret">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpAppId" label="公众号appid">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpToken" label="公众号token">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpSecret" label="公众号secret">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpAesKey" label="公众号AES">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpLowBatMsgT" label="低电量提醒模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpChargeMsgT" label="充值提醒模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpLongTimeMsgT" label="长时间未充值提醒模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="wxMpMinusMsgT" label="负电量提醒模板">
            </el-table-column>
            <!-- 微信结束 -->
            <!-- 支付宝开始 -->
            <el-table-column width="200" align="center" prop="aliAppId" label="支付宝appId">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliPrivateKey" label="支付宝用户私钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.aliPrivateKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.aliPrivateKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliPublicAppKey" label="支付宝应用公钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.aliPublicAppKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.aliPublicAppKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliPublicKey" label="支付宝公钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.aliPublicKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.aliPublicKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliAesKey" label="支付宝AES">
            </el-table-column>
            <!-- 支付宝结束 -->
            <!-- 汇付开始 -->
            <el-table-column width="200" align="center" prop="huifuType" label="汇付主体">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.huifuType == 1">斗拱</el-tag>
                <el-tag v-else-if="scope.row.huifuType == 2">AdaPay</el-tag>
                <el-tag type="danger" v-else>暂无</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuDgSysId" label="斗拱商户ID">
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuDgProductId" label="斗拱产品ID">
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuDgPrivateKey" label="斗拱商品私钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.huifuDgPrivateKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.huifuDgPrivateKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column width="200" align="center" prop="huifuDgPublicKey" label="斗拱应用公钥">
              <template slot-scope="scope">
                <el-popover width="600" placement="top" trigger="hover" :content="scope.row.huifuDgPublicKey">
                  <span slot="reference" class="twoLineCls">{{
                    scope.row.huifuDgPublicKey
                  }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <!-- 汇付结束 -->
            <!-- 阿里短信模板开始 -->
            <el-table-column width="200" align="center" prop="aliMsgAccessKeyId" label="阿里云accessKeyId">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgAccessKeySecret" label="阿里云accessKeySecret">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliSignName" label="签名">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgBindCardT" label="绑定银行卡短信模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgChangeCardT" label="更改银行卡短信模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgDeleteCardT" label="删除银行卡短信模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgRegisterT" label="阿里云注册模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgForgetPasswordT" label="阿里云忘记密码模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgChangeOldUserT" label="阿里云旧手机号模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgChangeNewUserT" label="阿里云新手机号模板">
            </el-table-column>
            <el-table-column width="200" align="center" prop="aliMsgVirtualT" label="租币短信模板">
            </el-table-column>
            <!-- 阿里云模板结束 -->
            <el-table-column width="200" align="center" prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column width="200" align="center" prop="modifyTime" label="修改时间">
            </el-table-column>
            <el-table-column width="200" fixed="right" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="superAdmin(scope.row)">超管</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination v-show="tableData.length !== 0" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 15, 20, 25, 30]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- DMzhifu -->
    <div class="dialog1">
      <el-dialog title="DM支付" :visible.sync="dialogShow" @close="dialogShow = false; money = ''; qrContent = ''; qrcode = ''"
        width="30%">
        <div class="block">
          <el-input v-model="money" clearable placeholder="请输入金额"></el-input>
        </div>
        <div v-if="qrContent" style="
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            align-items: center;
          ">
          <div class="qrcode" ref="qrCodeUrl"></div>
          <div style="font-weight: bold; color: #000">
            请使用支付宝扫码
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button v-if="!qrcode" type="primary" @click="showQr">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import QRCode from "qrcodejs2";
import { getTenantApi, postQrApi } from "../../../api/system/tenant";
export default {
  data() {
    return {
      money: '',
      dialogShow: false,
      loading: false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: null,
      tenantName: "",
      activeName: "second",
      type: "2",
      qrTenant: '',
      qrContent: '',
      qrcode: ''
    };
  },
  created() {
    this.pageSize = Number(sessionStorage.getItem("pageSize")) || 10;
    this.pageNum = Number(sessionStorage.getItem("pageNum")) || 1;
    this.getTenant(this.pageNum, this.pageSize, this.tenantName, this.type);
  },
  destroyed() {
    sessionStorage.removeItem("pageNum");
    sessionStorage.removeItem("pageSize");
  },
  methods: {
    showQr() {
      const loading = this.$loading({
        target: document.querySelector(".dialog1 .el-dialog"),
        lock: true,
      });
      postQrApi(this.qrTenant, { money: this.money }).then(res => {
        if (res.code == 200) {
          loading.close()
          this.qrContent = res.data
          this.$nextTick(() => {
            if (this.qrcode) {
              this.$refs.qrCodeUrl.innerHTML = "";
            }
            this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: this.qrContent, // 需要转换为二维码的内容
              width: 100,
              height: 100,
              colorDark: "#000000",
              colorLight: "#ffffff",
            });
          });
        } else {
          loading.close()
          this.qrContent = ''
        }
      }).catch(err => {
        loading.close()
        this.qrContent = ''
      })
    },
    recharge(e) {
      this.dialogShow = true
      this.qrTenant = e.tenantId
    },
    handleClick(e) {
      if (e.index == 0) {
        this.type = 2;
        this.search();
      } else {
        this.type = 1;
        this.search();
      }
    },
    search() {
      this.pageNum = 1;
      this.getTenant(this.pageNum, this.pageSize, this.tenantName, this.type);
      this.$refs.isExpand1.bodyWrapper.scrollTop = 0;
      this.$refs.isExpand2.bodyWrapper.scrollTop = 0;
    },
    // 获取租户列表
    getTenant(pageNum, pageSize, tenantName, type) {
      this.loading = true;
      getTenantApi(pageNum, pageSize, tenantName, type).then((res) => {
        console.log(res);
        this.total = res.data.total;
        if (res.data.rows.length == 0) {
          this.pageNum = this.pageNum - 1;
          if (this.pageNum > 0) {
            this.search();
          } else {
            this.tableData = res.data.rows;
            this.loading = false;
          }
        } else {
          this.loading = false;
          this.tableData = res.data.rows;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = 1;
      this.getTenant(this.pageNum, val, this.tenantName, this.type);
      sessionStorage.setItem("pageSize", val);
      this.pageSize = val;
      this.$refs.isExpand1.bodyWrapper.scrollTop = 0;
      this.$refs.isExpand2.bodyWrapper.scrollTop = 0;
    },
    handleCurrentChange(val) {
      this.getTenant(val, this.pageSize, this.tenantName, this.type);
      sessionStorage.setItem("pageNum", val);
      this.pageNum = val;
      this.$refs.isExpand1.bodyWrapper.scrollTop = 0;
      this.$refs.isExpand2.bodyWrapper.scrollTop = 0;
    },
    // 编辑租户
    edit(e) {
      this.$router.push({
        path: "/sys/putTenant",
        query: {
          eidtId: e.tenantId,
        },
      });
    },
    superAdmin(e) {
      this.$router.push({
        path: "/sys/superAdmin",
        query: {
          eidtId: e.tenantId,
        },
      });
    },
    //添加租户
    add() {
      this.$router.push("/sys/postTenant");
    },
  },
};
</script>
  
<style lang="scss" scoped>
.dev {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);

  .search {
    height: 5%;
    margin-bottom: 15px;

    .el-input {
      width: 200px;
    }

    .el-button {
      margin-left: 15px;
    }
  }

  .el-tabs {
    height: 100%;

    /deep/ .el-tabs__content {
      height: 100%;

      .el-tab-pane {
        height: 70%;

        .table {
          height: 100%;

          .el-table {
            height: 100%;
          }

          /deep/ .el-table__row {
            .el-table__cell {
              .cell {
                display: flex;
                justify-content: space-around;

                button {
                  margin: 0;
                }
              }
            }
          }

          .el-pagination {
            text-align: center;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
<style>
.el-tooltip__popper {
  max-width: 300px;
}

.twoLineCls {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>